<!--公用班级管理卡片-->
<template>
  <v-card>
    <v-card-title primary class="title blue--text">管理班级</v-card-title>
    <v-container fluid grid-list-xs>
      <v-layout row wrap>
        <v-flex d-flex xs4 text-xs-center v-for="(item,index) of classList" :key="index">
          <v-card
            @click="handleClick(index)"
            :color="handleClassIndex===index?'#4bbaf4':''"
            :class="{'white--text':handleClassIndex===index,'blue--text':handleClassIndex!=index}"
          >
            <v-card-text>
              {{item.floor}}{{item.room}}
              <br>
              {{item.class}}
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</template>
<script>
export default {
  props: {
    classList: [Array],
    handleClassIndex: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      // test
      classListTest: [
        {
          floor: "7#",
          room: "301-302",
          class: "201801班"
        },
        {
          floor: "7#",
          room: "303-304",
          class: "201802班"
        },
        {
          floor: "7#",
          room: "305-306",
          class: "201803班"
        }
      ]
    };
  },
  methods: {
    handleClick(index) {
      this.$emit("handleClass", index);
    }
  }
};
</script>
<style lang='less' scoped>
</style>